import React from 'react';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { WeaTools } from 'ecCom';
import { Button, Icon, message, Spin } from 'antd';
import { WeaRightMenu, WeaTop, WeaTab, WeaLocaleProvider, WeaRichText, WeaSearchGroup, WeaFormItem, WeaDialog, WeaPopoverHrm } from 'ecCom';
import { WeaSwitch, WeaTableNew } from 'comsMobx';

const getLabel = WeaLocaleProvider.getLabel;
const WeaTable = WeaTableNew.WeaTable;

const topTab = [
  {
    title: getLabel(515415, '发送广播'),
    viewcondition: '0',
  },
  {
    title: getLabel(510038, '发送记录'),
    viewcondition: '1',
  },
];

const basicToolBar = {
  toolbar: [
    { name: 'document', items: ['Source'] },
    { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike'] },
    { name: 'styles', items: ['Font', 'FontSize'] },
    { name: 'colors', items: ['TextColor', 'BGColor'] },
    {
      name: 'paragraph',
      items: [
        'NumberedList',
        'BulletedList',
        '-',
        'Outdent',
        'Indent',
        '-',
        'JustifyLeft',
        'JustifyCenter',
        'JustifyRight',
        'JustifyBlock',
        '-',
      ],
    },
    { name: 'links', items: ['Link', 'Unlink'] },
    { name: 'insert', items: ['Table'] },
    { name: 'clipboard', items: ['Undo', 'Redo'] },
    { name: 'insert', items: ['Image'] },
    { name: 'tools', items: ['Maximize'] },
  ],
  uploadUrl: '/api/blog/fileupload/uploadimage',
  extraPlugins: 'html5video',
  startupFocus: false,
  placeholder: getLabel(516181, '请填写广播内容...'),
};

@inject('smsRadioStore')
@observer
class SmsRadio extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      ck: '',
      viewAttr: 2,
    };
    this.onSwitchChange = this.onSwitchChange.bind(this)
  }

  componentDidMount() {
    const { smsRadioStore } = this.props;
    const { getSendLogTable, getLogCondition, getSendBroadcastCondition } = smsRadioStore;

    window.showPopoverHrmCusBtn = true; // 是否显示人力小卡片 语音、视频按钮
    // 广播
    getSendBroadcastCondition();
    getSendLogTable();
    getLogCondition();
  }

  getDropMenuDatas = () => {
    const btnArr = [];
    return btnArr;
  }

  onToolsChange = (type = '', ids = '', list = [], lev2Type = '') => {
    const { smsRadioStore } = this.props;
    const { setState, changedatas } = smsRadioStore;

    let str = '';
    if (type === 'Upload' && lev2Type === 'image') {
      list.forEach((item) => {
        str += `<img data-imgsrc="${item.imgSrc}" src="${item.imgSrc}" alt="" style="max-width: 100%;height: auto;"/>&#8203;`;
        // str += `<img data-imgsrc="${item.imgSrc}" src="${item.imgSrc}" class="formImgPlay"   onclick=${viewer} style="max-width: 100%;height: auto;"/>&#8203;`;
        // str += `<img src='${item.imgSrc}' data-imgsrc='${item.imgSrc}' alt=''/>&#8203;`;
      });
    }
    if (type === 'Upload' && (lev2Type === 'file' || lev2Type === 'list')) {
      //  fileData.push(item);
      // str +=
      //   `<span class="icon-coms-currency-Enclosure" title="附件" />&nbsp;<a onclick=\"parent.openFullWindowHaveBar('/docs/docs/DocDsp.jsp?id=${item.fileid}&isrequest=1&requestid=${requestid}&desrequestid=0')\"` +
      //   'style="cursor:pointer;text-decoration:underline !important;margin-right:8px"' +
      //   `href="javascript:void(0);" contenteditable="false">${item.filename}</a>`;
      // if (item.showLoad) {
      //   str +=
      //     `&nbsp;<a unselectable='off' contenteditable='false'` +
      //     `href='javascript:try{downloadFile(\"${item.loadlink}\","${item.fileid}")}catch(e){window.open(\"${item.loadlink}\")}' ` +
      //     `style='cursor:pointer;text-decoration:underline;margin-right:8px'>下载(${item.filesize})</a>&nbsp;</br>`;
      // }
    }
    if (type === 'Browser' && lev2Type === '152') {
      setState({ workFlowReplaceData: list });
      changedatas.signworkflowids = ids;
      changedatas.signworkflowreplacedata = list;
      setState(changedatas);
      // str +=
      //   `<a contenteditable='false' onclick="ecCom.WeaRichText.openAppLink(this,${item.id},152)"` +
      //   'href="javascript:void(0);" unselectable="off" contenteditable="false"' +
      //   'style="cursor:pointer;text-decoration:underline !important;margin-right:8px">' +
      //   `${item.name}</a>&nbsp;</br>`;
    }
    if (type === 'Browser' && lev2Type === '37') {
      setState({ docReplaceData: list });
      changedatas.signdocids = ids;
      changedatas.signdocreplacedata = list;
      setState(changedatas);
      // str +=
      //   `<a contenteditable='false' onclick="ecCom.WeaRichText.openAppLink(this,${item.id},37)"` +
      //   'href="javascript:void(0);" unselectable="off" contenteditable="false"' +
      //   'style="cursor:pointer;text-decoration:underline !important;margin-right:8px">' +
      //   `${item.name}</a>&nbsp;</br>`;
    }
    return str;
  };

  fileListChange = (ids, list) => {
    const { smsRadioStore } = this.props;
    const { setState, changedatas } = smsRadioStore;

    setState({ fileData: list });
    changedatas.uploadfileids = ids;
    changedatas.uploadfiledata = list;
    setState(changedatas);
  }

  renderSendForm = () => {
    const { smsRadioStore } = this.props;
    const { sendBroadcastForm } = smsRadioStore;
    const { fileData, workFlowReplaceData, docReplaceData } = smsRadioStore;
    // 富文本业务扩展工具栏定义
    const bottomBarConfig = [
      {
        name: 'Upload', // 上传组件
        type: 'list', // 上传组件类型
        show: (
          <div title={`${getLabel(385751, '附件上传(最大')}100M/${getLabel(27591, '个')})`}>
            <span style={{ fontSize: 12 }}>
              <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@jrxw7e@uploadIcon`} type="paper-clip" title={getLabel(500574, '上传附件')} /> {getLabel(156, '附件')}
            </span>
          </div>
        ), // 使用 antd 图标
        uploadUrl: '/api/doc/upload/uploadFile2Doc', // 上传地址
        category: '/api/doc/upload/uploadFile', // 文档目录
        datas: fileData,
        maxUploadSize: 100, // 最大限制
        onListChange: (ids, list) => this.fileListChange(ids, list),
        multiSelection: true,
      },
      {
        name: 'Browser', // 浏览按钮组件
        show: (
          <div>
            <span style={{ position: 'relative' }} >
              {docReplaceData.length > 0 && <div className="red-point" />}
            </span>
            <span style={{ fontSize: 12 }}>
              <i className="icon-coms-Journal" title={getLabel(22243, '文档')} /> {getLabel(22243, '文档')}
            </span>
          </div>
        ), // 使用组件库图标
        type: '37', // 浏览按钮类型 文档
        title: getLabel(22243, '文档'), // 浏览按钮标题
        hasAdvanceSerach: true,
        idSeparator: ',',
        isAutoComplete: 0,
        isDetail: 0,
        isMultCheckbox: false,
        isSingle: false,
        linkUrl: '/docs/docs/DocDsp.jsp?isrequest=1&id=',
        pageSize: 10,
        viewAttr: 2,
        memorise: true,
        replaceDatas: docReplaceData,
        isSingle: false,
      },
      {
        name: 'Browser', // 浏览按钮组件
        show: (
          <div>
            <span style={{ position: 'relative' }} >
              {workFlowReplaceData.length > 0 && <div className="red-point" />}
            </span>
            <span style={{ fontSize: 12 }}>
              <i className="icon-coms-Workflow-o" title={getLabel(30045, '流程')} /> {getLabel(30045, '流程')}
            </span>
          </div>
        ),
        type: '152', // 浏览按钮类型
        hasAdvanceSerach: true,
        isDetail: 0,
        isMultCheckbox: false,
        linkUrl: '/workflow/request/ViewRequest.jsp?isrequest=1&requestid=',
        title: getLabel(30045, '流程'), // 浏览按钮标题
        memorise: true,
        isSingle: false,
        replaceDatas: workFlowReplaceData,
        viewAttr: 2,
      },
    ];
    const { condition, isFormInit } = sendBroadcastForm.form;
    let group = [];
    isFormInit && toJS(condition).map((c) => {
      let items = [];
      c.items.map((field) => {
        if (field.domkey[0] == 'receiver' && sendBroadcastForm.form.getFormDatas().receiver.value[0] == 0) {
          field.selectWidth = '100%';
        }
        items.push({
          com: (<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@em8gdn@${(field.domkey && field.domkey[0]) ? field.domkey[0] : 'em8gdn'}`}
            label={`${field.label}`}
            labelCol={{ span: `${field.labelcol}` }}
            ratio1to2
            error={sendBroadcastForm.form.getError(field)}
            tipPosition="bottom"
            wrapperCol={{ span: `${field.fieldcol}` }}
          >
            <WeaSwitch
              ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@kvz1ha@${(field.domkey && field.domkey[0]) ? field.domkey[0] : 'kvz1ha'}`}
              fieldConfig={field}
              form={sendBroadcastForm.form}
              onChange={this.onSwitchChange}
            />
          </WeaFormItem>),
          col: 1,
          hide: sendBroadcastForm.form.isHide(field, (keys, allParams) => false),
        });
      });
      items = items.concat([
        {
          com: (<div>
            <div>
              <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@1sm2g2@$smsRadio_content`}
                label={getLabel(131685, '广播内容')}
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 18 }}
              />
            </div>
            <WeaRichText ecId={`${this && this.props && this.props.ecId || ''}_WeaRichText@zxcr7o@$smsRadio_WeaRichText`}
              ref={(richtext) => { this.richtext = richtext; }}
              bottomBarConfig={bottomBarConfig}
              viewAttr={this.state.viewAttr}
              value={this.state.ck}
              textareaStyle={{ fontSize: 22 }}
              ckConfig={basicToolBar}
              extentExts="mp3"
              onToolsChange={this.onToolsChange}
              onChange={text => this.setState({ ck: text })}
            />
          </div>),
          col: 1,
        }]);
      group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@toqofn@WeaSearchGroup_smsRadio`} needTigger={false} title={c.title} showGroup={c.defaultshow} items={items} />);
    });
    return group;
  }

  renderSendLog = () => {
    const { smsRadioStore } = this.props;
    const { loading } = smsRadioStore;

    return (
      <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@bhqhgt`} spinning={loading}>
        <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@2bf922`}
          hasOrder={true}
          rowKey={record => record.ID}
          comsWeaTableStore={smsRadioStore.logTableStore}
          needScroll={true}
          paginationProps={{ pageSizeOptions: ['10', '20', '30', '40', '50'] }}
          getColumns={this.getColumns}
          onOperatesClick={this.onOperatesClick}
        />
      </Spin>
    );
  }

  renderTabContent = () => {
    const { smsRadioStore } = this.props;
    const { selectKey } = smsRadioStore;

    if (selectKey === '0') {
      return this.renderSendForm();
    }
      return this.renderSendLog();
  }

  // 广播发送记录table右侧菜单点击触发
  onOperatesClick = (record, opertaeIndex, operate, index) => {
    const { smsRadioStore } = this.props;
    const { getOperatesContext } = smsRadioStore;

    switch (Number(index)) {
      // 重新发送
      case 0:
        getOperatesContext(record.ID).then(() => {
          this.onOperatesAgain();
        });
        break;
    }
  }

  // 右侧重新发送按钮回调函数
  onOperatesAgain = () => {
    const { smsRadioStore } = this.props;
    const { checkLogItem } = smsRadioStore;

    this.onAgain(checkLogItem);
  }

  // 发送广播页面发送按钮====》发送广播
  onCheck = () => {
    const { smsRadioStore } = this.props;
    const { sendBroadcastForm, sendRadioMsg, setState, selectKey } = smsRadioStore;
    sendBroadcastForm.form.validateForm().then((f) => {
      let type = sendBroadcastForm.form.getFormDatas().type.value;
      let text = this.state.ck;
      let receive = sendBroadcastForm.form.getFormDatas().receiver.value[0];
      let receiver = sendBroadcastForm.form.getFormDatas().receiver.value[1];

      // 验证所有输入框是否不为空
      if (f.isValid && !(type == null || type == '') && !(text == null || text == '') && ((receive == 1 && !(receiver == null || receiver == '')) || receive == 0)) {
        // 验证通过, balabala业务代码
        sendRadioMsg(this.state.ck);
        // 业务完成后，清空发送页面form，页面跳转广播发送记录页面
        this.setState({ ck: '' });
        sendBroadcastForm.form.resetForm();
      } else {
        setState({ tipDialogVisible: true });
        f.showErrors();
      }
    });
  }

  // 发广播页面输入框发生变化
  onSwitchChange = (field) => {
    const { smsRadioStore } = this.props;
    const { sendBroadcastForm, getSendBroadcastCondition } = smsRadioStore;

    if (field.type != null) { // 广播类型输入框发生了变化
      let title = sendBroadcastForm.form.getFormDatas().radioTitle.value;
      let text = this.state.ck;
      // 重新获取表单
      getSendBroadcastCondition(sendBroadcastForm.form.getFormDatas().type.value);
      // 重新渲染表单
      this.renderTabContent();
      // 重新给表单赋值
      sendBroadcastForm.form.updateFields({ type: field.type });
      sendBroadcastForm.form.updateFields({ radioTitle: title });
      this.setState({ ck: text });
    }
  }

  // 广播内容弹出框关闭X
  onCancel = () => {
    const { smsRadioStore } = this.props;
    const { setState } = smsRadioStore;

    setState({
      checkLogItem: {},
      dialogVisible: false,
      workFlowBiz: '',
      docBiz: '',
      fileBiz: '',
      workFlowReplaceData: [],
      docReplaceData: [],
      fileData: [],
      changedatas: {},
    });
  }

  // 接收人列表弹出框关闭X
  onReceiverDialogCancel = () => {
    const { smsRadioStore } = this.props;
    const { setState, receiverSearchAdvance } = smsRadioStore;

    setState({
      receiverIds: {},
      receiverDialogVisible: false,
    });
    receiverSearchAdvance.form.reset();
  }

  // 提示弹出框关闭X
  tipDialogCancel = () => {
    const { smsRadioStore } = this.props;
    const { setState } = smsRadioStore;

    setState({
      tipDialogVisible: false,
    });
  }

  // 重新发送按钮回调函数
  onAgain = (params) => {
    const { smsRadioStore } = this.props;
    const { setState, sendBroadcastForm } = smsRadioStore;

    this.setState({ viewAttr: 2 });
    setState({
      dialogVisible: false,
      selectKey: '0',
     });
    sendBroadcastForm.form.updateFields({ radioTitle: params.title });
    this.setState({ ck: params.contexts });
  }

  // 发送记录普通搜索点击==》回调函数
  onSearch = () => {
    const { smsRadioStore } = this.props;
    smsRadioStore.getSendLogTable(true);
  }

  // 发送记录高级搜索点击搜索==》回调函数
  handleSearchAd = () => {
    const { smsRadioStore } = this.props;
    const { logSearchAdvance } = smsRadioStore;

    smsRadioStore.getSendLogTable(true);
    logSearchAdvance.visible = false;
  }

  // 接收人高级搜索点击搜索==》回调函数
  handleReceiverSearchAd = () => {
    const { smsRadioStore } = this.props;
    const { receiverSearchAdvance } = smsRadioStore;

    smsRadioStore.getReceiverTable(true);
    receiverSearchAdvance.visible = false;
  }

  // 获取发送记录高级搜索下面三个按钮
  getTabButtonsAd = () => {
    const { smsRadioStore } = this.props;
    const { logSearchAdvance } = smsRadioStore;

    return [
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@1e2nnf@searchBtn_Ad`} type="primary" onClick={this.handleSearchAd}>
        {getLabel(197, '搜索')}
      </Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@23n9lc@resetBtn_Ad`} type="ghost" onClick={() => { logSearchAdvance.form.reset(); }}>
        {getLabel(2022, '重置')}
      </Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@g77gzc@closeBtn_Ad`}
        type="ghost"
        onClick={(e) => { logSearchAdvance.visible = false; }}
      >
        {getLabel(31129, '取消')}
      </Button>,
    ];
  };

  // 发送记录列表字段点击==》回调函数
  onRowClick = (record, col, id) => {
    const { smsRadioStore } = this.props;
    const { getBroadcastContext } = smsRadioStore;

    if (col.dataIndex === 'TITLE') {
      getBroadcastContext(id);
    }
  }

  // 获取列
  getColumns = columns => columns.map((col) => {
      if (col.dataIndex === 'TITLE') {
        return {
          ...col,
          render: (text, record, index) => (
              <span className={'column-text'} onClick={() => this.onRowClick(record, col, record.ID)}>
                {text}
              </span>
            ),
        };
      } else if (col.dataIndex === 'CREATERUSERID') {
        return {
          ...col,
          render: (text, record, index) => (
              <span onClick={() => this.onRowClick(record, col, record.ID)}>
                <a style={{ cursor: 'pointer', color: '#4D7AD8' }} href={`javaScript:openhrm(${record.CREATERUSERID})`} onClick={e => window.pointerXY(e)} title={record.CREATERUSERIDspan}>
                  {record.CREATERUSERIDspan}
                </a>
              </span>
            ),
        };
      }
      return col;
    })

  // 获取接收人表格列
  getReceiverColumns = columns => columns.map((col) => {
      if (col.dataIndex === 'tname') {
        return {
          ...col,
          render: (text, record, index) => (
              <span>
                <a style={{ cursor: 'pointer', color: '#4D7AD8' }} href={`javaScript:openhrm(${record.tid})`} onClick={e => window.pointerXY(e)} title={record.CREATERUSERIDspan}>
                  {record.tnamespan}
                </a>
              </span>
            ),
        };
      }
      return col;
    })

  // 渲染发送记录高级搜索表单
  getSearchAD = () => {
    const { smsRadioStore } = this.props;
    const { logSearchAdvance } = smsRadioStore;
    return logSearchAdvance.form.render();
  };

  // 渲染接收人高级搜索表单
  getReceiverSearchAD = () => {
    const { smsRadioStore } = this.props;
    const { receiverSearchAdvance } = smsRadioStore;
    return receiverSearchAdvance.form.render();
  };

  // 渲染流程业务数据
  renderWorkFlowBiz = () => {
    const { smsRadioStore } = this.props;
    const { workFlowBiz } = smsRadioStore;

    if (workFlowBiz) {
      return workFlowBiz.map((val, index) => {
        let valHtml = `<a contenteditable='false' onclick="ecCom.WeaRichText.openAppLink(this,${val.bizid},152)"` +
          'href="javascript:void(0);" unselectable="off" contenteditable="false"' +
          'style="cursor:pointer;text-decoration:none !important;margin-right:8px">' +
          `${val.bizname}</a>&nbsp;</br>`;
        return (
          <div className={index == 0 ? 'container-content-Workflow' : 'container-content-Workflow-n'} dangerouslySetInnerHTML={{ __html: valHtml }} />
        );
      });
    }
  }

  // 渲染文档业务数据
  renderDocBiz = () => {
    const { smsRadioStore } = this.props;
    const { docBiz } = smsRadioStore;

    if (docBiz) {
      return docBiz.map((val, index) => {
        let valHtml = `<a contenteditable='false' onclick="ecCom.WeaRichText.openAppLink(this,${val.bizid},37)"` +
          'href="javascript:void(0);" unselectable="off" contenteditable="false"' +
          'style="cursor:pointer;text-decoration:none !important;margin-right:8px">' +
          `${val.bizname}</a>&nbsp;</br>`;
        return (
          <div className={index == 0 ? 'container-content-Workflow' : 'container-content-Workflow-n'} dangerouslySetInnerHTML={{ __html: valHtml }} />
        );
      });
    }
  }

  // 渲染附件业务数据
  renderFileBiz = () => {
    const { smsRadioStore } = this.props;
    const { fileBiz } = smsRadioStore;

    if (fileBiz) {
      return fileBiz.map((val, index) => {
        let valHtml = `<a onclick="ecCom.WeaRichText.openAppLink(this,${val.bizid},37)" unselectable="off"` +
          'style="cursor:pointer;text-decoration:none !important;margin-right:8px"' +
          `href="javascript:void(0);" contenteditable="false">${val.bizname}</a>&nbsp;<a unselectable='off' contenteditable='false'` +
          `href='javascript:window.open(\"${val.loadlink}\");void(0)' ` +
          `style='cursor:pointer;text-decoration:none;margin-right:8px'>下载(${val.filesize})</a>&nbsp;</br>`;
        return (
          <div className={index == 0 ? 'container-content-Workflow' : 'container-content-Workflow-n'} dangerouslySetInnerHTML={{ __html: valHtml }} />
        );
      });
    }
    // if (fileBiz) {
    //   return fileBiz.map((val, index) => {
    //     let valHtml = `<a onclick="ecCom.WeaRichText.openAppLink(this,${val.bizid},37)" unselectable="off"` +
    //       'style="cursor:pointer;text-decoration:none !important;margin-right:8px"' +
    //       `href="javascript:void(0);" contenteditable="false">${val.bizname}</a>&nbsp;<a unselectable='off' contenteditable='false'` +
    //       `href='javascript:try{downloadFile(\"${val.loadlink}\","${val.bizid}")}catch(e){window.open(\"${val.loadlink}\")}' ` +
    //       `style='cursor:pointer;text-decoration:none;margin-right:8px'>下载(${val.filesize})</a>&nbsp;</br>`;
    //     return (
    //       <div className={index == 0 ? "container-content-Workflow" : "container-content-Workflow-n"} dangerouslySetInnerHTML={{ __html: valHtml }}></div>
    //     );
    //   })
    // }
  }

  // 渲染接收人列表
  renderReceiverTable = () => {
    const { smsRadioStore } = this.props;
    const { loading } = smsRadioStore;

    return (
      <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@24o3rc`} spinning={loading}>
        <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@2sb8x0`}
          hasOrder={true}
          rowKey={record => record.tid}
          comsWeaTableStore={smsRadioStore.receiverTableStore}
          needScroll={true}
          paginationProps={{ pageSizeOptions: ['10'] }}
          getColumns={this.getReceiverColumns}
        />
      </Spin>
    );
  }

  // 获取接收人高级搜索下面三个按钮
  getReceiverTabButtonsAd = () => {
    const { smsRadioStore } = this.props;
    const { receiverSearchAdvance } = smsRadioStore;

    return [
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@v947rn@searchBtn_TabButtonsAd`} type="primary" onClick={this.handleReceiverSearchAd}>
        {getLabel(197, '搜索')}
      </Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@52qkan@resetBtn_TabButtonsAd`} type="ghost" onClick={() => { receiverSearchAdvance.form.reset(); }}>
        {getLabel(2022, '重置')}
      </Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@o31en0@closeBtn_TabButtonsAd`}
        type="ghost"
        onClick={(e) => { receiverSearchAdvance.visible = false; }}
      >
        {getLabel(31129, '取消')}
      </Button>,
    ];
  };

  // 接收人普通搜索点击==》回调函数
  ReceiverOnSearch = () => {
    const { smsRadioStore } = this.props;

    smsRadioStore.getReceiverTable(true);
  }

  // 接收人数点击事件ids
  receiverClick = (ids) => {
    const { smsRadioStore } = this.props;
    const { getReceiverTable, getRadioReceiverCondition, receiverIds, setState, receiverDialogVisible } = smsRadioStore;
    // 接收人
    this.renderReceiverTable();
    setState({
      receiverIds: { receiverid: ids },
    });
    getReceiverTable();
    getRadioReceiverCondition();
    setState({
      receiverDialogVisible: true,
    });
  }

  render() {
    const { smsRadioStore } = this.props;
    const { logSearchAdvance, checkLogItem, loading, dialogVisible, selectKey, setState, receiverDialogVisible, receiverSearchAdvance, tipDialogVisible, workFlowBiz, docBiz, fileBiz } = smsRadioStore;
    const topBtns = [
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@3dtmsg@sendBtn_topBtn`} type="primary" onClick={this.onCheck}>{getLabel(2083, '发送')}</Button>,
    ];
    let buttons = [
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@rpjl8b@sendAgainBtn_topBtn`} type="primary" onClick={() => this.onAgain(checkLogItem)}>
        {getLabel(507765, '重新发送')}
      </Button>,
    ];
    let RightTipButtons = [
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@boi8rz@sureBtn_topBtn`} type="primary" onClick={this.tipDialogCancel} >{getLabel(826, '确定')}</Button>,
    ];
    const moreBtn = {
      datas: [

      ],
    };
    return (
      <div className="sms-radio">
        <WeaPopoverHrm ecId={`${this && this.props && this.props.ecId || ''}_WeaPopoverHrm@tuf4k8`} />
        <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@ajt751`}
          collectParams={{
            favname: getLabel(127099, '广播消息'),
            favouritetype: 5,
            objid: 0,
            importantlevel: 1,
          }}
        >
          <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@rxq5yw`}
            loading={loading}
            title={getLabel(127099, '广播消息')}
            icon={<i className="icon-coms02-top-news2" />}
            iconBgcolor="#0079de"
            buttonSpace={10}
            showDropIcon={true}
            dropMenuDatas={this.getDropMenuDatas()}
            buttons={selectKey === '0' ? topBtns : []}
          >
            <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@x03aqx`}
              loading={loading}
              datas={topTab}
              keyParam="viewcondition" // 主键
              selectedKey={selectKey}
              onChange={(v) => {
                setState({ selectKey: v });
              }}
              buttonsAd={this.getTabButtonsAd()}
              onSearch={() => this.onSearch()}
              onSearchChange={v => logSearchAdvance.form.updateFields({ title: v })}
              searchType={selectKey === '1' ? ['base', 'advanced'] : null}
              searchsBaseValue={logSearchAdvance.form.getFormParams().title}
              searchsAd={this.getSearchAD()}
              showSearchAd={logSearchAdvance.visible}
              setShowSearchAd={e => logSearchAdvance.visible = e}
            />
            {this.renderTabContent()}
          </WeaTop>
        </WeaRightMenu>
        <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@r2puyh`}
          scalable // 开启放大功能
          style={{ width: 700, height: 400 }}
          hasScroll={true}
          title={getLabel(514516, '广播详情')}
          icon="icon-coms02-top-news2"
          visible={dialogVisible}
          buttons={buttons}
          moreBtn={moreBtn}
          onCancel={() => this.onCancel()}
        >
          <div id="add" className="sms-radio-dialog-container">
            <div className="container-head">
              <div className="container-title">{checkLogItem.title}</div>
              <div className="container-info">
                <div className="container-sendInfo">
                  <span>{checkLogItem.creater}</span>
                  <span className="container-time">{checkLogItem.createdate}  {checkLogItem.createtime}</span>
                </div>
                <div>{getLabel(515418, '接收人数：')}<a onClick={this.receiverClick.bind(this, checkLogItem.receieverid)} className="column-text" >{checkLogItem.count}</a></div>
              </div>
            </div>
            <div className="container-content" dangerouslySetInnerHTML={{ __html: checkLogItem.contexts }} />
            <div className="container-content" style={{ display: fileBiz.length > 0 ? 'block' : 'none' }}>
              <span className="icon-coms-currency-Enclosure" title="附件" />
              {this.renderFileBiz()}
            </div>
            <div className="container-content" style={{ display: docBiz.length > 0 ? 'block' : 'none' }}>
              <span className="icon-coms-Journal" title="文档" />
              {this.renderDocBiz()}
            </div>
            <div className="container-content" style={{ display: workFlowBiz.length > 0 ? 'block' : 'none' }}>
              <span className="icon-portal-Workflow-o" title="流程" />
              {this.renderWorkFlowBiz()}
            </div>
          </div>
        </WeaDialog>

        <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@nk3k78`}
          scalable // 开启放大功能
          style={{ width: 800, height: 500 }}
          hasScroll={true}
          title={getLabel(131689, '广播接收人')}
          icon="icon-coms02-top-news2"
          visible={receiverDialogVisible}
          moreBtn={moreBtn}
          onCancel={() => this.onReceiverDialogCancel()}
        >
          <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@bopeeb`}
            loading={loading}
            buttonsAd={this.getReceiverTabButtonsAd()}
            onSearch={() => this.ReceiverOnSearch()}
            onSearchChange={v => receiverSearchAdvance.form.updateFields({ name: v })}
            searchType={['base', 'advanced']}
            searchsBaseValue={receiverSearchAdvance.form.getFormParams().name}
            searchsAd={this.getReceiverSearchAD()}
            showSearchAd={receiverSearchAdvance.visible}
            setShowSearchAd={e => receiverSearchAdvance.visible = e}
          />
          {this.renderReceiverTable()}
        </WeaDialog>

        <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@f2cmhs`}
          icon={'icon-coms-Invalid'}
          iconBgcolor={'#FFAA00'}
          title={getLabel(131329, '信息确认')}
          style={{ width: 300, height: 70 }}
          visible={tipDialogVisible}
          buttons={RightTipButtons}
          onCancel={() => this.tipDialogCancel()}
        >
          <div id="add" className="sms-radio-dialog-container">
            <div className="container-content" ><div className="sms-radio-tip">{getLabel(15859, '必要信息不完整！')}</div></div>
          </div>
        </WeaDialog>
      </div>
    );
  }
}

export default SmsRadio;
